<template>
	<view class="login">
		<view class="" style="text-align: center;">
			<image src="../../static/logo.png" class="logo_icon" mode=""></image>
		</view>
		<view class="" style="width: 80%;margin: 50rpx auto;">
			<view class="form_box">
				<u-form :model="form" ref="uForm">
					<u-form-item label="账号:" prop="userName" >
						<u-input v-model="form.userName" placeholder='请输入账号'/>
					</u-form-item>
					<u-form-item label="密码:" prop="passWord" >
						<u-input v-model="form.passWord" :password-icon="true" type='password' placeholder='请输入密码'/>
					</u-form-item>
				</u-form>
			</view>
			<view class="reg_text">
				<text @click="handReg()">
					还没有账号? &nbsp&nbsp立即注册
				</text>
			</view>
			<u-button shape="square" type="primary" @click="handLogin()">点击登录</u-button>
		</view>
		<!-- open-type='getUserInfo' @click="handLogin" -->
		<!-- <u-popup :mask-close-able='false' v-model="show" mode="bottom" border-radius="14" closeable='true'>
			<view class="login_box" v-if="userInfo.code===''||userInfo.userInfoEncryptedData===''||userInfo.userInfoIvStr===''">
				<view class="info_box">
					<view class="title">
						获取您的公开信息
					</view>
					<view class="info_content">
						我们需要获取您的公开信息（昵称,头像），才能继续，请点击确认按钮。
					</view>
					<view class="btns">
						<u-button style="width: 50%;margin-right: 20rpx;" shape="square" @click="show=false">取消</u-button>
						<u-button open-type='getUserInfo' @click="getUserInfo" withCredentials="true" style="width: 50%;" shape="square"
						 type="success">确定</u-button>
					</view>

				</view>
			</view>
			<view class="login_box" v-else>
				<view class="info_box">
					<view class="title">
						第二步：获取您的手机号码（2/2）
					</view>
					<view class="info_content">
						我们需要获取您的手机号码才能继续登录，请点击确定按钮。
					</view>
					<view class="btns">
						<u-button style="width: 50%;margin-right: 20rpx;" shape="square">取消</u-button>
						<u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="width: 50%;" shape="square" type="success">确定</u-button>
					</view>

				</view>
			</view> 
		</u-popup>-->
	</view>
</template>

<script>
	import cacheFunc from '@/utils/cache.js'
	export default {
		data() {
			return {
				form:{
					userName :'',
					passWord :''
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入账号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, ],
					passWord: [{
						validator: (rule, value, callback) => {
							var reg = /^\S*(?=\S{6,})(?![^a-zA-Z]+$)(?!\D+$)\S*$/;
							if (!value) {
								callback(new Error('请输入密码'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('密码长度在6-8位(6-8位数字、字母组合)'));
							}
						},
						trigger: ['change', 'blur'],
					}],
				}
				// show: true,
				// code: '',
				// userInfo: {
				// 	code: '',
				// 	phoneEncryptedData: "",
				// 	phoneIvStr: "",
				// 	userInfoEncryptedData: "",
				// 	userInfoIvStr: ""
				// 	// code (string, optional): 登陆code ,
				// 	// phoneEncryptedData (string, optional): 用户手机号加密字符串 ,
				// 	// phoneIvStr (string, optional): 用户手机号加密IV向量 ,
				// 	// userInfoEncryptedData (string, optional): 用户基本信息加密字符串 ,
				// 	// userInfoIvStr (string, optional): 用户基本信息加密IV向量
				// }

			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			if(this.cache.getCache('token')){
				uni.navigateTo({
					url:'/pages/home/home'
				})
			}
		},
		methods: {
			handLogin(){
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						const res = await this.$u.api.loginForUserName(this.form)
						console.log(res)
						uni.showToast({
							title: '登录成功!'
						})
						this.cache.setCache('token', res.token)
						this.cache.setCache('nickName', res.nickName)
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/home/home'
							})
						}, 1000)
					}
				})
			},
			handReg(){
				uni.navigateTo({
					url:'/pages/login/reg'
				})
			}
			// async getPhoneNumber(e) {
			// 	console.log(e)
			// 	if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {

			// 	} else {
			// 		this.userInfo.phoneIvStr = e.detail.iv
			// 		this.userInfo.phoneEncryptedData = e.detail.encryptedData
			// 		const res = await this.$u.api.login(this.userInfo)

			// 		if (res.token) {
			// 			this.cache.setCache('token', res.token)
			// 			 uni.navigateTo({
			// 			 	url:'../home/home'
			// 			 })
			// 		}

			// 		// token
			// 	}
			// },
			// getUserInfo(loginType, cb) {
			// 	uni.login({
			// 		success: res_login => {
			// 			uni.getUserInfo({
			// 				success: info => {
			// 					console.log('-------获取sessionKey、openid(unionid)-------')
			// 					console.log(info);
			// 					this.userInfo.code = res_login.code
			// 					this.userInfo.userInfoIvStr = info.iv
			// 					this.userInfo.userInfoEncryptedData = info.encryptedData
			// 					 this.$u.api.login(this.userInfo).then(res=>{
			// 						if (res.token) {
			// 							this.cache.setCache('token', res.token)
			// 							 uni.navigateTo({
			// 							 	url:'../home/home'
			// 							 })
			// 						}
			// 					})

			// 				}
			// 			});
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.logo_icon{
		width: 300rpx;
		height: 340rpx;
		margin: 0 auto;
		text-align: center;
		margin-top: 60rpx;
	}
	.form_box{
	}
	.reg_text{
		text-align: right;
		margin: 20px 0;
	}
	.login_box {
		padding: 30rpx;
		box-sizing: border-box;
		
		.info_box {
			.btns {
				display: flex;
				width: 100%;
				margin-top: 40rpx;
				margin-bottom: 100rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 500;

			}

			.info_content {
				color: $uni-text-color-grey;
				margin-top: 20rpx;
			}
		}
	}
</style>
